<template>
  <div class="video-player" @wheel="handleWheel">
    <div class="timeline-container">
      <div ref="timeTooltip" class="tooltip">
        {{ formatDay(chooesDay) }} {{ formatTime(currentTime) }}
      </div>
      <!--   v-model="currentTime"  @change="onTimeUpdate"-->
      <input
        type="range"
        min="0"
        :max="time - 1"
        v-model="currentTime"
        @input="seekVideo"
        class="timeline"
      />
      <div id="range-container">
        <input
          type="range"
          id="time-range"
          min="0"
          :max="time - 1"
          v-model="currentTime"
          @input="seekVideo"
          class="timeline"
        />
      </div>

      <!-- <div class="time-markers1">
        <div
          v-for="marker in timeMarkers"
          :key="marker"
          class="time-marker1"
          :style="{ left: `${(marker / time) * 100}%` }"
        >
        </div>
      </div> -->
      <div class="time-markers">
        <div
          v-for="(marker, index) in timeMarkers"
          :key="marker"
          class="time-marker"
          :style="{ left: `${(marker / time) * 100}%` }"
          @click="currentTime = marker"
        >
          <span class="fg"></span>
          <span v-if="index % 2 == 0"> {{ formatTime(marker) }}</span>
          <span v-else class="test">{{}} </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, defineEmits } from 'vue'
const props = defineProps({
  chooesTime: {
    type: Number,
    default: 0
  },
  chooesDay: {
    type: Date,
    default: ''
  }
})

const time = ref(24 * 60 * 60)
const currentTime = ref(0)
const timeTooltipVisible = ref(false)
const timeTooltip = ref(null)
watch(
  () => props.chooesTime,
  (chooesTime) => {
    currentTime.value = parseInt(chooesTime)
  },
  {
    deep: true,
    immediate: true
  }
)
const timeMarkers = computed(() => {
  const markers = []
  let interval = time.value / 48
  for (let i = 0; i < time.value - 1; i += interval) {
    markers.push(i)
  }
  markers.push(time.value - 1)
  return markers
})

onMounted(() => {
  // Assuming videoPlayer is a ref to the video element
  // videoPlayer.value.addEventListener("loadedmetadata", () => {
  //   videoDuration.value = videoPlayer.value.duration;
  // });
  setRangeBackground()
})
const redTimeIntervals = [
  { start: 8 * 60 * 60, end: 8 * 60 * 60 + 10 * 60 }, // 08:00 - 10:00
  { start: 12 * 60 * 60, end: 12 * 60 * 60 + 50 * 60 }, // 12:00 - 13:00
  { start: 18 * 60 * 60, end: 18 * 60 * 60 + 10 * 60 }, // 18:00 - 20:00
  { start: 20 * 60 * 60, end: 18 * 60 * 60 + 10 * 60 }
]

function setRangeBackground() {
  const range = document.getElementById('time-range')
  const rangeContainer = document.getElementById('range-container')
  const gradientStops = ['white 0%']
  redTimeIntervals.forEach((interval) => {
    const startPercent = (interval.start / 86400) * 100
    const endPercent = (interval.end / 86400) * 100
    gradientStops.push(`white ${startPercent}%`)
    gradientStops.push(`red ${startPercent}%`)
    gradientStops.push(`red ${endPercent}%`)
    gradientStops.push(`white ${endPercent}%`)
  })
  gradientStops.push('white 100%')

  rangeContainer.style.backgroundImage = `linear-gradient(to right, ${gradientStops.join(', ')})`
  // console.log('background-------', background)
}

const onTimeUpdate = (event) => {
  console.log('Time updated:', event.target.value)
  // currentTime.value = videoPlayer.value.currentTime;
}
const emits = defineEmits(['currentTimeChange'])
const seekVideo = () => {
  console.log('Seeking to:', currentTime.value)
  emits('currentTimeChange', currentTime.value)
  // videoPlayer.value.currentTime = currentTime.value;
}
// defineExpose({
//   gettime: () => currentTime.value,
//   seekVideo
// })

const formatDay = (date) => {
  const options = { year: 'numeric', month: '2-digit', day: '2-digit' }
  return new Intl.DateTimeFormat('zh-CN', options).format(date)
}
const formatTime = (seconds) => {
  const date = new Date(null)
  date.setSeconds(seconds)

  return date.toISOString().substr(11, 5)
}

const handleMouseMove = (event) => {
  const rect = event.target.getBoundingClientRect()
  const position = (event.clientX - rect.left) / rect.width
  const tooltipPosition = position * 100
  currentTime.value = position * time.value
  timeTooltipVisible.value = true

  if (timeTooltip.value) {
    timeTooltip.value.style.left = `${tooltipPosition}%`
    timeTooltip.value.style.transform = `translateX(-50%)`
  }
}

const handleWheel = (event) => {
  if (event.deltaY < 0) {
    // if (currentTime.value <= 0) {
    //   currentTime.value = 0
    // } else {
    //   currentTime.value -= 1000
    // }
    console.log('鼠标滚轮上滑')
  } else {
    // if (currentTime.value >= time.value - 1) {
    //   currentTime.value = time.value - 1
    // } else {
    //   currentTime.value += 1000
    // }
    console.log('鼠标滚轮下滑')
  }
}
</script>

<style scoped>
.video-player {
  overflow: hidden;
}
.timeline-container {
  padding: 10rpx 20px;
}
.timeline {
  /* position: absolute;
  bottom: 20px;
  left: 0; */
  z-index: 10;
  cursor: pointer;
  width: 98.6%;
  margin-left: 10px;
  margin-right: 18px;
}

.time-markers {
  /* position: relative; */
  display: flex;
  justify-content: space-between;
  width: 100%;
  /* margin-top: 10px; */
  margin-top: -8px;
}
.time-markers1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.time-marker1 {
  color: white;
  width: 1px;
  height: 16px;
  background: #fff;
  white-space: nowrap;
  margin-left: 14px;
}
.time-marker {
  /* position: absolute;
  top: -10px; */
  color: white;
  transform: translateY(11%);
  font-size: 12px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* position: relative; */
  cursor: pointer;
}
.fg {
  width: 1px;
  height: 10px;
  background: #fff;
}
/* .time-marker::after {
  content: '';
  position: absolute;
  height: 3px;
  width: 1px;
  background-color: #fff;
} */

.tooltip {
  /* position: absolute; */
  /* background: #555; */
  width: 100%;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  /* bottom: 38px;
  left: 0; */
  white-space: nowrap;
  /* transform: translateX(-50%); */
}
.test {
  content: '  ';
  height: 10px;
  margin-top: 8px;
}
.test::after {
  content: '';
}
#range-container {
  position: relative;
  width: 100%;
  height: 2px;
}

#time-range {
  width: 100%;
  appearance: none;
  background: linear-gradient(to right, white, white);
}

#time-range::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 100%;
  background: black;
  cursor: pointer;
}

#time-range::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  background: red;
  pointer-events: none;
}
</style>
